<template>
  <div>
    <template v-if="isLeaf!='1'">
      <div class="menu_tree_body" v-for="(item ,index) in treeData" :key="index">
        <template v-if="item.nodeLeaf!='1'">
          <div class="menu_tree_other">{{item.nodeName}}</div>
          <treeTemplate :tree-data="item.children" :is-leaf="item.children[0].nodeLeaf"/>
        </template>
      </div>
    </template>
    <template v-if="isLeaf=='1'" >
      <div class="menu_leaf" v-for="(jtem ,ind) in treeData">{{jtem.nodeName}}</div>
    </template>

  </div>


</template>

<script>
  export default {
    props: ['treeData', 'isLeaf'],
    name: "treeTemplate",
    data() {
      return {msg: 'hello vue'}
    },
    created() {

    }, components: {}, methods: {}
  }
</script>

<style scoped>

</style>
<style lang="less">
  .menu_tree_body {
    display: flex;
    /*flex-direction: column;*/

    .menu_tree_other {
      /*background-color: pink;*/
      width: 12rem;
      height: 2rem;
      font-size: 1rem;
      float: left;
      border-right: .15rem solid #a3bcdf;
      margin: 1rem;
      font-weight: 700;
    }

    .menu_leaf {
      display: inline-block;
      height: 3rem;
      font-size: 1rem;
      line-height: 3rem;
      padding: 0 .8rem;
      float: left;
      cursor: pointer;
    }
  }
</style>
